<template>
<view class="">
	<view class="container">
		<view class="head">
			<text>请编辑职位用工合同</text>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
	</view>	
		<blank></blank>
	<view class="container">
		<view class="list" v-for="(item,index) in contractList" :key="index">
			<image src="../../static/img/con_ico1.png" mode="" @click="contractDelete(item.id)"></image>
			<image class="special" src="../../static/img/con_ico2.png" mode=""></image>
			<text>{{item.title}}</text>
			<text class="btn" @click="edit(item)">修改</text>
			<view class="btm">
				<text>{{item.name}}</text>
				<text style="color: #FFA008;" @click="use(item.name,item.id)">使用</text>
			</view>	
		</view>
	</view>	
		<view class="nocontent" v-if="contractList.length<=0">
			<view class="" style="text-align: center;">
				<image src="../../static/img/nodata.png" mode=""></image>
			</view>
		</view>

		<view class="add" @click="addcintract()">
			<button type="default">添加合同</button>
		</view>
	</view>
</template>

<script>
	import blank from "../../components/blank.vue"
	export default {
		data() {
			return {
				publishType:"",
				contractList:[],
			}
		},
		components:{
			blank
		},
		onLoad(e) {
			this.publishType = e.type	
		},
		onShow() {
			this.getcontract()
		},
		methods: {
			edit(item) {
				uni.navigateTo({
					url:'/pages/addcontract/addcontract?obj='+ JSON.stringify(item)
				})
			},
			getcontract(){
				this.$utils.requert({url:'contractList',type:'post'}).then(res=>{
					if(res.code === 1 ){
						// this.$utils.showLayer(res.message)
						this.contractList = res.data
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			// 删除合同
			contractDelete(id){
				this.$utils.requert({url:'contractDelete',data:{contractId:id},type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
							this.getcontract()
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
				},
			addcintract(){
				uni.navigateTo({
					url:"/pages/addcontract/addcontract?type="+this.publishType
				})
			},
			use(name,id){
				uni.setStorageSync('contractobj',{
					name:name,
					id:id
				})
				uni.navigateBack({
					delta:1
				})
			}
				
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx 23rpx;
		box-sizing: border-box;
	}

	.reach_bottom{
		margin-top:35rpx;
		text-align: center;
		font-size: 28rpx;
		color: #D5D1D1;
	}
	.head{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 33rpx;
		height: 100rpx;
	}
	.head image{
		width: 23rpx;
		height: 28rpx;
		margin-left: auto;
	}
	.list{
		display: flex;
		flex-direction: column;
		width: 48%;
		background-color: #f6f6f6;
		text-align: center;
		font-size: 40rpx;
		color: #ccc;
		/* margin-left: 20rpx; */
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.list image{
		width: 30rpx;
		height: 30rpx;
		margin-left: auto;
		padding: 20rpx;
	}
	.list .special{
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;
	}
	.list .btn {
		width: 80rpx;
		margin: 20rpx auto;
		padding: 3rpx 15rpx;
		border: 1px solid #ccc;
		font-size: 24rpx;
		border-radius: 20rpx;
	}
	.list .btm{
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}
	.add {
		position: fixed;
		bottom: 100rpx;
		right: 30rpx;
		
	}
	.add button {
		background-color: #f6f6f6;
		font-size: 30rpx;
		border-radius: 35rpx;
		color: #007AFF;
	}
	.add button::after{
		border: none;
	}
	.nocontent{
		margin-top: 200rpx;
	}
</style>
